{% extends "./template.html" %}

{% block body %}
<div class="d-flex justify-content-center" id="alert-box" style="z-index:1060">
    <div class="alert d-none" id="alert" style="width:100%;z-index:1060">
        <h6 class="alert-heading">提示</h6>
        <p class="alert-body"></p>
    </div>
</div>

<div class="pt-3 pb-3 fixed-top" style="background: #fff;">
    <div class="container">
        <a href="/?user_id={{user_id}}" class="btn btn-sm btn-outline-info">回首页</a>
        <a href="/post?user_id={{user_id}}" class="btn btn-sm btn-outline-primary">创建文章</a>
        <a href="/articles?user_id={{user_id}}&is_active=1" class="btn btn-sm btn-outline-success">我的文章</a>
        <a href="/articles?user_id={{user_id}}&is_active=0" class="btn btn-sm btn-outline-danger">回收站</a>
    </div>
</div>
<div class="pt-5">
<h5>
    {% if is_active==1%}
    我的文章：
    {% else %}
    我的回收站：
    {% endif %}
</h5>
<ul class="list-group">
    {% if articles.length>0%}
    {% for item in articles %}
    <li class="list-group-item d-flex justify-content-between">
        <span>{{ item.title }}</span>
        {% if item.is_active %}
        <button type="button" data-id="{{item.id}}" data-active="{{item.is_active}}" class="del-btn btn btn-danger">删除</button>
        {% else %}
        <button type="button" data-id="{{item.id}}" data-active="{{item.is_active}}" class="btn btn-success">恢复</button>
        {% endif %}
        
    </li>

    {% endfor %}
    {% else %}
    sorry,empty
    {% endif %}
</ul>
</div>
{% endblock %}
{% block script %}
<script src="/script/index.js"></script>
<script type="module">
    window.onload = () => {
        let deleteBtns = document.querySelector('.list-group').querySelectorAll('.btn')
        let token = localStorage.getItem('token');
        deleteBtns.forEach(el => {
            el.addEventListener('click', e => {
                let id = e.target.dataset.id;
                let is_active = e.target.dataset.active;
                $.ajax({
                    headers: {
                        'Authorization': token
                    },
                    type: 'POST',
                    url: `/api/article/change`,
                    data: {
                        id,
                        is_active
                    },
                    success: (res) => {
                        if (res.status == 401) {
                            checkMsg({ msg: res.msg, type: 'warning' }, () => {
                                window.location = '/login'
                            })
                        } else {
                            checkMsg({ msg: is_active?'删除成功':'恢复成功', type: 'success' }, () => {
                                window.location = '/article?user_id={{user_id}}'
                                location.reload()
                            })
                        }
                    }
                })
            })
        })
    }
</script>
{% endblock %}